<template>
  <!-- 系统设置弹框 -->
  <n-modal
    :mask-closable="false"
    v-model:show="open"
    class="edit-dialog"
    preset="dialog"
    :show-icon="false"
    :on-close="closeBtn"
    transform-origin="center"
    style="background: #60676c; color: #fff; width: 570px"
  >
    <template #header>
      <div class="title-font">编辑</div>
    </template>
    <n-scrollbar style="max-height: calc(90vh - 200px)">
      <div class="card-item">
        <div class="title font-24 margin-bot30">
          <div>产品信息</div>
        </div>
        <div class="label-item">
          <div class="label-txt">产品名称</div>
          <div class="label-input">
            <n-input
              :disabled="store.superUser != 0"
              maxlength="50"
              v-model:value="productInfo.productName"
              type="text"
              placeholder="请输入产品名称"
            />
          </div>
        </div>
        <div class="label-item">
          <div class="label-txt">产品版本号</div>
          <div class="label-input">
            <n-input
              maxlength="50"
              :disabled="store.superUser != 0"
              v-model:value="productInfo.productVersion"
              type="text"
              placeholder="请输入产品版本号"
            />
          </div>
        </div>
        <div class="title font-24 margin-bot30 margin-top40">公司信息</div>
        <div class="logo-box">
          <div class="label-txt">公司LOGO</div>
          <div>
            <n-upload
              list-type="image-card"
              :default-file-list="ductInfo.img"
              :custom-request="customRequest"
              accept="image/png, image/jpeg,image/webp"
              :max="1"
            >
              点击上传
            </n-upload>
          </div>
        </div>
        <div class="label-item">
          <div class="label-txt">公司名称</div>
          <div class="label-input">
            <n-input
              maxlength="50"
              v-model:value="productInfo.companyName"
              type="text"
              placeholder="请输入公司名称"
            />
          </div>
        </div>
        <div class="title font-24 margin-bot30 margin-top40">其他信息</div>
        <div
          v-for="(item, i) in productInfo.otherInfoData"
          :key="i"
          class="label-item"
        >
          <div class="label-input" style="margin-right: 10px">
            <n-input
              maxlength="50"
              :disabled="store.superUser != 0"
              v-model:value="item.key"
              type="text"
              placeholder="请输入展示名称"
            />
          </div>
          <div class="label-input">
            <n-input
              maxlength="50"
              :disabled="store.superUser != 0"
              v-model:value="item.value"
              type="text"
              placeholder="请输入展示描述"
            />
          </div>
          <div
            v-if="store.superUser == 0"
            class="add-btn"
            @click="deleteItem(i)"
          >
            <icons class="icon" name="delete" />
          </div>
        </div>
        <div
          v-if="productInfo.otherInfoData.length < 3 && store.superUser === 0"
          class="add-btn"
          @click="addItem"
        >
          <icons class="icon" name="jiahao" /> 添加信息
        </div>
      </div>
    </n-scrollbar>
    <div class="footer">
      <n-button class="i-btn btn-border" @click="closeBtn">取消</n-button>
      <n-button class="i-btn btn-bg" @click="UpdateMdsInfo">保存</n-button>
    </div>
  </n-modal>
</template>
<script lang="ts" setup>
import { computed, ref, watch, onMounted } from "vue";
import { uuid } from "../../../tools/radom";
import { UploadCustomRequestOptions } from "naive-ui";
import { tmpStore } from "../../../store/modules/template";
import { useAppStore } from "../../../store/modules/user";
import { UploadFile, UpdateMdsInfomation } from "../../../server";
const store = useAppStore();
const template = tmpStore();
const props = defineProps({
  openWin: {
    type: Boolean,
    default: false,
  },
  ductInfo: {
    type: Object,
    default: () => {},
  },
});
const addItem = () => {
  if (productInfo.value.otherInfoData.length < 3) {
    productInfo.value.otherInfoData.push({ key: "", value: "" });
  }
};
const deleteItem = (index: number) => {
  productInfo.value.otherInfoData.splice(index, 1);
};
const previewFileList = ref([]) as any;
const open = computed(() => props.openWin);
const productInfo = computed(() => props.ductInfo);
onMounted(() => {});
const customRequest = async ({
  file,
  onFinish,
  onError,
  onProgress,
}: UploadCustomRequestOptions) => {
  const formData = new FormData();
  if (file && file.type) {
    const fileName = file.name;
    const fileExtension = fileName.split(".").pop();
    const randomSuffix = uuid();
    // 构建新文件名
    const newFileName = `${randomSuffix}.${fileExtension}`;
    // 创建一个新的File对象，用新文件名替换原文件名
    formData.append("file", file.file as File, newFileName);
    // 创建一个新Blob对象，将文件内容复制到其中
    onProgress({ percent: 10 });
    const res: any = await UploadFile(formData);
    if (res.result.isSuccess) {
      onProgress({ percent: 100 });
      const imgUrl = res.result.result.fileName; //图片上传的路径
      productInfo.value.companyLogo = imgUrl;
      setTimeout(() => {
        onFinish();
      }, 500);
    } else {
      onError();
      store.error(res.result.message); // 错误提示
    }
  }
};
const emits = defineEmits(["closeWin"]);
const closeBtn = () => {
  emits("closeWin", 0);
};
/**
 * @description: 修改产品信息
 * @return {*}
 * @author: cool panda
 */
const UpdateMdsInfo = async () => {
  const index = productInfo.value.otherInfoData.findIndex(
    (e: any) => !e.key || !e.value
  );
  if (index > -1) {
    store.error("请完善其他信息"); // 错误提示
    return false;
  }
  const params = {
    token: "",
    data: productInfo.value,
  };
  const res: any = await UpdateMdsInfomation(params);
  if (res.result.isSuccess) {
    store.success(res.result.message);
    emits("closeWin", 2);
  } else {
    store.error(res.result.message); // 错误提示
  }
};
</script>
<style lang="less" scoped>
.edit-dialog {
  .title-font {
    font-size: 24px;
    color: #02a8ae;
  }
  .card-item {
    width: 497px;
    height: 680px;
    color: #fff;
    padding: 20px 0px 0;
    margin-right: 10px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #02a8ae;
      // text-align: left;
    }
    .font-24 {
      font-size: 24px;
    }
    .font-16 {
      font-size: 16px;
    }
    .margin-bot30 {
      margin-bottom: 30px;
    }
    .margin-top40 {
      margin-top: 40px;
    }
    .user-info {
      display: flex;
      flex-direction: column;
      margin: 66px 0 180px 0;
      .user-name {
        margin-top: 30px;
      }
    }
    .btn-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      .btn-item {
        width: 277px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin-bottom: 30px;
      }
      .btn-item:last-child {
        margin-bottom: 0;
      }
      .bg-blue {
        background: #02a8ae;
      }
      .bg-yellow {
        background: #ee9708;
      }
    }
    .label-item {
      display: flex;
      align-items: center;
      height: 35px;
      margin-bottom: 20px;
      .label-txt {
        width: 100px;
        text-align: left;
        margin-right: 10px;
      }
      .add-btn {
        padding: 5px 10px;
      }
      .label-input {
        flex: 1;
        :deep(.n-input) {
          --n-color: none !important;
          --n-color-focus: rgba(57, 66, 72, 1) !important;
          --n-text-color: rgb(255, 255, 255) !important;
          --n-placeholder-color: rgba(255, 255, 255, 0.2) !important;
          --n-border-hover: 1px solid #02a8ae !important;
          --n-border-focus: 1px solid #02a8ae !important;
          --n-border: 1px solid rgba(255, 255, 255, 0.2) !important;
        }
      }
    }
    .label-item:last-child {
      margin-bottom: 0;
    }
    .logo-box {
      display: flex;
      margin-bottom: 25px;
      .label-txt {
        width: 100px;
        text-align: left;
        margin-right: 10px;
      }
      :deep(.n-upload) {
        --n-dragger-color: none !important;
      }
    }
    .tab-class {
      color: #fff;
    }
    .search-box {
      display: flex;
      justify-content: space-between;
      height: 35px;
      margin-bottom: 20px;
      .add-btn {
        font-size: 14px;
        color: #fff;
        background-color: #01c0e4;
        margin-left: 30px;
        // border: none;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 20px;

    .i-btn {
      width: 100px;
      height: 36px;
      font-size: 18px;
      color: #fff;
      margin-right: 30px;
    }

    .i-btn:last-child {
      margin-right: 0;
    }

    .btn-border {
      border: 1px solid #fff;
    }

    .btn-bg {
      background: #01c0e4;
    }

    :deep(.n-button) {
      --n-border: none !important;
      --n-border-hover: none !important;
      --n-border-focus: none !important;
    }
  }
}
</style>
<style>
.n-base-close {
  --n-close-icon-color: #ffffff;
  color: #ffffff !important;
}
</style>
